<template>
  <div class="homework-list flex flex-wrap justify-between content-start">
    <div class="item bg-white mb-16px" v-for="i in homeList" :key="i.id">
      <div class="flex-1 px-14px box-border flex flex-col relative">
        <span class="unread absolute bg-FF4040" v-show="i.unread"></span>
        <div class="header">
          <div class="border-bottom"></div>
          <img class="icon-teacher" :src="i.showSubjectImg" mode=""  @error="errorImg($event)"/>
          <div class="detail">
            <div class="name text-333">{{ i.examName }}</div>
            <div class="time text-9CADBB">
              {{ $utils.parseTime(i.createTime) }}
            </div>
            <div class="" style="margin-bottom: 8px; display: flex; align-items: center">
              <span class="text-A3A3A3">作业类型：</span
              ><span class="text-333 ellipsis">{{ i.examCode ? '考试' : '作业' }}</span>
            </div>
            <div class="" style="display: flex; align-items: center">
              <span class="text-A3A3A3">作业内容：</span
              ><span class="text-333 ellipsis">{{ i.examContent }}</span>
            </div>
          </div>
          <div
            :class="['status', i.studentStatus == 0 ? 'text-FF9B21 bg-FF9B21-10' : '']"
            v-show="i.studentStatus == 0"
          >
            待提交
          </div>
          <div
            class="status"
            :class="i.studentStatus == 10 ? 'text-FF4040 bg-FF4040-10' : ''"
            v-show="i.studentStatus == 10"
          >
            待批改
          </div>
          <div
            class="status"
            :class="i.studentStatus == 20 ? 'text-30C9A1 bg-30C9A1-10' : ''"
            v-show="i.studentStatus == 20"
          >
            已完成
          </div>
        </div>
      </div>
      <div class="endBox">
        <div class="leftBox">
          <img src="@/assets/homework/headimg@2x.png" alt="" />
          <span>{{ i.teacherName }}老师</span>
        </div>
        <div class="rightBox">
          <div
            class="btn"
            @click="todo(i)"
            v-show="i.questionNum || i.studentStatus === 0 || i.examType === 4"
          >
            <span v-if="i.studentStatus == 0">去提交</span>
            <span v-else>查看详情</span>
          </div>
        </div>
      </div>
    </div>
    <div class="item-fill-block" v-if="homeList.length % 3 === 2"></div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { config } from '@/config/config'
export default {
  filters: {
    subjectName: function (id, dict) {
      if (!Array.isArray(dict)) {
        return ''
      }

      return dict.find((s) => s.value === id).label
    },
    timeRange: function (item) {
      const { beginTime, endTime } = item
      return `${beginTime} ~ ${endTime}`
    },
    studentsRange: function (item) {
      const { studentNames = [] } = item

      if (studentNames.length <= 3) {
        return `${studentNames.join(',')}等${studentNames.length}名同学`
      } else {
        return `${studentNames[0]},${studentNames[1]},${studentNames[2]}等${studentNames.length}名同学`
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    homeList() {
      let arr = JSON.parse(JSON.stringify(this.list))
      arr.forEach((element) => {
        element.showSubjectImg = config.fileSrc+`/commonFile/subjects/${element.subject}.png`
      })
      return arr
    }
  },
  data() {
    return {
      subjectDict: null
    }
  },
  async created() {
    this.subjectDict = await this.getDictByType('subject')
  },
  methods: {
    ...mapActions(['getDictByType']),
    todo(item) {
      this.$emit('todo', item)
    },
    errorImg(e){
      e.srcElement.src=require('@/assets/homework/unknown.png');
      //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
      e.srcElement.onerror=null; //防止闪图
    }
  }
}
</script>

<style lang="scss" scoped>
.homework-list {
  font-size: 26px;
  line-height: 26px;
  padding-top: 20px;
  .item {
    width: 610px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
    padding: 14px 0px;
    box-sizing: border-box;

    .endBox {
      padding: 0 14px;
      box-sizing: border-box;
      height: 86px;
      display: flex;
      justify-content: space-between;

      .leftBox {
        display: flex;
        align-items: center;

        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
      }

      .rightBox {
        height: 100%;
        display: flex;
        align-items: center;

        .btn {
          width: 130px;
          height: 60px;
          background: linear-gradient(92deg, #51c3ff 0%, #00a5fc 100%);
          border-radius: 30px 30px 30px 30px;
          font-size: 26px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          cursor: pointer;
          color: #fff;
        }
      }
    }

    &-fill-block {
      content: '';
      width: 403px;
      height: 439px;
      border-radius: 16px;
      overflow: hidden;
    }

    .color-bar {
      // width: 6px;
      // background: linear-gradient(180deg, #51c3ff 0%, #a2ffc6 100%);
    }

    .unread {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      top: 3px;
      right: 3px;
      z-index: 998;
    }

    .header {
      position: relative;
      // background-color: red;
      padding-bottom: 20px;
      display: flex;

      .border-bottom {
        width: 100%;
        left: 0;
        height: 10px;
        bottom: 0px;
        background-image: linear-gradient(to right, #bebebe 0%, #bebebe 50%, transparent 50%);
        background-size: 21px 1px;
        background-repeat: repeat-x;
        position: absolute;
      }

      .icon-teacher {
        width: 106px;
        height: 132px;
        margin-right: 10px;
      }

      .detail {
        // flex: 1;

        .name {
          font-size: 26px;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 228px;
          overflow: hidden;
          margin-bottom: 10px;
        }

        .time {
          font-size: 22px;
          line-height: 22px;
          margin-bottom: 17px;
        }
      }

      .status {
        position: absolute;
        z-index: 997;
        top: 12px;
        right: 12px;
        width: 86px;
        height: 34px;
        border-radius: 15px 15px 15px 15px;
        font-size: 22px;
        text-align: center;
        line-height: 34px;
        white-space: nowrap;
      }
    }
  }
}
</style>
